<template>
    <div class="dutyRoomMonitoring">
        <div class="content">
            <div class="content-table">
                <span>当前值班人员</span>
                <hr>
                <div class="content-onDuty" v-if="onDutyInfo.length == 0">
                    <p style="text-align: center; font-size:20px; width:300px">暂无值班人员</p>
                </div>
                <div class="content-onDuty" v-else>
                    <div class="content-onDuty-box" v-for="item in onDutyInfo" :key="item.num">
                        <img :src="require(`@/assets/images/headShot/${item.photo}`)">
                        <div class="content-onDuty-box-info">
                            <p>姓名:<span>{{ item.name }}</span></p>
                            <p>工号:<span>{{ item.workNumber }}</span></p>
                            <p>职务:<span>{{ item.job }}</span></p>
                            <p>电话:<span>{{ item.phone }}</span></p>
                        </div>
                    </div>
                </div>
                <span>当日值班记录</span>
                <hr>
                <div class="content-table-search">
                    <div class="byName">
                        <span>人员名称:</span>
                        <el-input placeholder="请输入内容" v-model="input" clearable>
                        </el-input>
                    </div>
                    <div class="byType">
                        <span>事件类型:</span>
                        <el-select v-model="value" placeholder="全部">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                    <el-button plain icon="el-icon-search" v-on:click="clickHandler" @click="getDutyLog">查询</el-button>
                    <el-button plain icon="el-icon-refresh-right" v-on:click="clickHandler" @click="reset">重置
                    </el-button>
                </div>
                <div class="content-table-body">
                    <el-table :data="onDutyLog" style="width: 100%" max-height="210px">
                        <el-table-column label="序号">
                            <template slot-scope="scope">
                                {{ limit * (currentPage - 1) + (scope.$index + 1) }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" label="姓名">
                        </el-table-column>
                        <el-table-column prop="workNumber" label="工号">
                        </el-table-column>
                        <el-table-column prop="events" label="事件类型">
                        </el-table-column>
                        <el-table-column prop="reportTime" label="上报时间">
                        </el-table-column>
                        <el-table-column label="操作">
                            <template>
                                <el-button type="text" size="small">查看详情</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="paginationBox">
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                            :current-page="currentPage1" :page-sizes="[5, 10, 15, 20]" :page-size="5"
                            layout="total, sizes, prev, pager, next, jumper" :total="total">
                        </el-pagination>
                    </div>
                </div>
            </div>
            <div class="content-camera">
                <div class="content-camera-box">
                    <div class="content-camera-box-cameraBox">
                        <video id="videoCamera" style="width:100%; height:100%" autoplay></video>
                        <canvas style="display:none;" :width="videoWidth" :height="videoHeight"
                            id="canvasCamera"></canvas>
                    </div>
                    <div class="content-camera-box-text">
                        <p>值班室实时监控</p>
                        <textarea placeholder="请输入事件类型描述。"></textarea>
                        <div v-if="imgSrc" class="img_bg_camera">
                            <img :src="imgSrc" alt="" class="tx_img">
                        </div>
                        <div class="btnBox">
                            <el-button @click="getCompetence()" v-on:click="clickHandler">打开摄像头</el-button>
                            <el-button @click="stopNavigator()" v-on:click="clickHandler">关闭摄像头</el-button>
                            <el-button @click="setImage()" v-on:click="clickHandler">拍照</el-button>
                            <el-button @click="dialogFormVisible = true, dataURLtoFile()" v-if="imgSrc"
                                v-on:click="clickHandler">添加记录</el-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <el-dialog title="新添值班记录" :visible.sync="dialogFormVisible">
            <el-form :model="onDutyInfo">
                <el-form-item label="人员名称：" :label-width="formLabelWidth">
                    <el-select v-model="onDutyInfo.name" placeholder="请选择记录对象" clearable>
                        <el-option :label="item.name" :value="item.name" v-for="item in onDutyInfo"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="人员工号：" :label-width="formLabelWidth">
                    <el-select v-model="onDutyInfo.name" placeholder="请选择记录对象" clearable>
                        <el-option :label="item.workNumber" :value="item.workNumber" v-for="item in onDutyInfo">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="职务：" :label-width="formLabelWidth">
                    <el-input v-model="duty" placeholder="" disabled></el-input>
                </el-form-item>
                <el-form-item label="电话：" :label-width="formLabelWidth">
                    <el-input v-model="phone" placeholder="" disabled></el-input>
                </el-form-item>
                <el-form-item label="事件类型：" :label-width="formLabelWidth">
                    <el-select v-model="value" placeholder="全部">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-upload class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts/" multiple>
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>


            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确认</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>

export default {
    data: function () {
        return {
            onDutyInfo: [ //值班人员信息数组
                {}
            ],
            onDutyLog: [ //值班人员记录数组
                {}
            ],
            fileList: [{
                name: '',
                url: ''
            }], //上传的图片
            input: '',
            options: [{
                value: '上班打卡',
                label: '上班打卡'
            }, {
                value: '下班打卡',
                label: '下班打卡'
            }, {
                value: '离岗',
                label: '离岗'
            }, {
                value: '玩手机',
                label: '玩手机'
            }, {
                value: '在岗睡觉',
                label: '在岗睡觉'
            }
                , {
                value: '室内吸烟',
                label: '室内吸烟'
            }],
            label: '全部',
            value: '',
            currentPage1: 1,
            week: '',
            class: '',
            name: '',
            id: 0,
            currentPage: 1,
            duty: '',
            phone: '',
            limit: 5,
            total: 1,
            videoWidth: '',
            videoHeight: '',
            imgSrc: '',
            thisCancas: null,
            thisContext: null,
            thisVideo: null,
            dialogTableVisible: false,   //模态框
            dialogFormVisible: false,
            formLabelWidth: '120px'
        }

    },
    mounted: function () {
        this.getDataTime();
        this.getInfo();
        this.getDutyLog();
        this.getCompetence();
    },
    methods: {
        clickHandler(evt) { //强制失去焦点
            let target = evt.target;
            if (target.nodeName == "SPAN") {
                target = evt.target.parentNode;
            }
            console.log(evt);
            target.blur();
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.limit = val;
            this.getDutyLog();
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage = val;
            this.getDutyLog();
        },
        change(val) {
            console.log(val);
        },
        getDataTime() {   //获取当前星期及时间，来确定班次
            let date = new Date();
            let wk = date.getDay();
            let time = date.getHours();
            let weeks = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
            this.week = weeks[wk];
            if (time >= 9 && time < 16) {
                this.class = '早班';
            } else if (time >= 16 && time < 22) {
                this.class = '中班';
            } else {
                this.class = '晚班';
            }
            // console.log(this.week, this.class);
        },
        getInfo: function () {   //获取值班人员信息
            this.$axios({
                url: '/queryPeople',
                method: 'post',
                data: {
                    /* classes: this.class,
                    week: this.week */
                    classes: '早班',
                    week: '周一'
                }
            }).then(({ data }) => {
                if (data.code == 200) {
                    this.onDutyInfo = data.data;
                    // console.log(data.msg);
                    console.log(this.onDutyInfo);
                } else {
                    console.log(data);
                }
            })
        },
        getDutyLog: function () { //获取值班记录
            
            console.log(this.value);
            this.$axios({
                url: `queryTodayTake/${this.currentPage}/${this.limit}?name=${this.input}&&events=${this.value}`,
                method: 'post',
                data: {
                    /* classes: this.class,
                    week: this.week */
                    classes: '早班',
                    week: '周一'
                }
            }).then(({ data }) => {
                if (data.code == 200) {
                    this.onDutyLog = data.data;
                    this.total = data.total;
                    // console.log(data.msg);
                    // console.log(this.onDutyLog);
                } else {
                    console.log(data);
                }
            })
        },
        addLog: function () { //获取值班记录
            this.$axios({
                url: 'addKeeper',
                method: 'post',
                data: {
                    "classes": this.class,
                    "details": "",
                    "event": {
                        "event": "",
                        "id": 0
                    },
                    "id": 0,
                    "people": {
                        "id": 0,
                        "job": "",
                        "name": "",
                        "phone": "",
                        "photo": "",
                        "workNumber": ""
                    },
                    "reportTime": ""
                }
            }).then(({ data }) => {
                if (data.code == 200) {
                    this.onDutyLog = data.data;
                    this.total = data.total;
                    // console.log(data.msg);
                    // console.log(this.onDutyLog);
                } else {
                    console.log(data);
                }
            })
        },
        getCompetence() {
            let _this = this
            this.thisCancas = document.getElementById('canvasCamera')
            this.thisContext = this.thisCancas.getContext('2d')
            this.thisVideo = document.getElementById('videoCamera')
            // 旧版本浏览器可能根本不支持mediaDevices，我们首先设置一个空对象
            if (navigator.mediaDevices === undefined) {
                navigator.mediaDevices = {}
            }
            // 一些浏览器实现了部分mediaDevices，我们不能只分配一个对象
            // 使用getUserMedia，因为它会覆盖现有的属性。
            // 这里，如果缺少getUserMedia属性，就添加它。
            if (navigator.mediaDevices.getUserMedia === undefined) {
                navigator.mediaDevices.getUserMedia = function (constraints) {
                    // 首先获取现存的getUserMedia(如果存在)
                    let getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia
                    // 有些浏览器不支持，会返回错误信息
                    // 保持接口一致
                    if (!getUserMedia) {
                        return Promise.reject(new Error('getUserMedia is not implemented in this browser'))
                    }
                    // 否则，使用Promise将调用包装到旧的navigator.getUserMedia
                    return new Promise(function (resolve, reject) {
                        getUserMedia.call(navigator, constraints, resolve, reject)
                    })
                }
            }

            _this.videoWidth = document.getElementById('videoCamera').clientWidth;
            _this.videoHeight = document.getElementById('videoCamera').clientHeight; let constraints = { audio: false, video: { width: this.videoWidth, height: this.videoHeight, transform: 'scaleX(-1)' } }
            navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {
                // 旧的浏览器可能没有srcObject
                if ('srcObject' in _this.thisVideo) {
                    _this.thisVideo.srcObject = stream
                } else {
                    // 避免在新的浏览器中使用它，因为它正在被弃用。
                    _this.thisVideo.src = window.URL.createObjectURL(stream)
                    console.log(window.URL.createObjectURL(stream));
                }
                _this.thisVideo.onloadedmetadata = function (e) {
                    _this.thisVideo.play()
                }
            }).catch(err => {
                console.log(err)
            })
        },


        //  绘制图片（拍照功能）
        setImage() {
            let _this = this;
            // 点击，canvas画图
            // console.log(_this.videoWidth, _this.videoHeight);
            _this.thisContext.drawImage(_this.thisVideo, 0, 0, _this.videoWidth, _this.videoHeight)
            // 获取图片base64链接
            let url = this.thisCancas.toDataURL('image/png')
            // console.log(url);
            _this.imgSrc = url
            this.$emit('refreshDataList', this.imgSrc)
        },
        // base64转文件

        dataURLtoFile() {
            let alink = document.createElement("a");
            alink.href = this.imgSrc;
            alink.download = this.imgSrc.substring(this.imgSrc.length - 28, this.imgSrc.length - 18); //图片名
            alink.click();
        },
        // 关闭摄像头

        stopNavigator() {
            this.thisVideo.srcObject.getTracks()[0].stop()
        },
        reset: function () {
            this.input = '';
            this.value = '';
            this.getDutyLog();
        }
    },
    beforeDestroy: function () {
        this.stopNavigator();
    }
}
</script>

<style scoped lang="less">
.dutyRoomMonitoring {
    width: 100%;
    height: 100%;
    min-width: 940px;
    background-color: #d9ecff;
    text-align: left;

    /deep/ .el-dialog {
        position: relative;

        .upload-demo {
            position: absolute;
            right: 40px;
            top: 80px;
            width: 300px;
            height: 100px;

            .el-upload,
            .el-upload--text,
            .el-upload-dragger,
            .el-upload__input {
                width: 300px;
            }
        }

        .el-input__inner {
            width: 220px;
        }
    }

    .content {
        margin: 1%;
        width: 96%;
        min-width: 900px;
        min-height: 545px;
        height: 92%;
        background-color: #fff;
        padding: 1%;
        display: flex;
        justify-content: center;



        .content-table {
            width: 48%;
            min-width: 550px;
            padding: 1%;

            span {
                font-size: 1em;
                font-weight: bold;
            }

            hr {
                margin-top: 1%;
                border: 0;
                border-top: 2px solid #bbb;
                border-radius: 2px;
            }

            .content-onDuty {
                width: 100%;
                height: 40%;
                display: flex;
                justify-content: flex-start;
                align-items: center;

                .content-onDuty-box {
                    width: 30%;
                    height: 90%;
                    display: flex;
                    flex-direction: column;
                    justify-content: flex-start;
                    align-items: center;

                    img {
                        width: 36%;
                        height: 33%;
                        min-width: 80px;
                        min-height: 80px;
                        background-color: rgb(214, 214, 214);
                        border: 0;
                        border-radius: 50%;
                    }

                    .content-onDuty-box-info {
                        margin-left: 20px;
                        height: 60%;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-evenly;
                        align-items: flex-start;

                        p {
                            font-weight: bold;

                            span {
                                font-weight: normal;
                            }
                        }
                    }
                }

            }

            .content-table-search {
                width: 100%;
                height: 5%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 13px;
                margin-top: 1%;

                .byName {
                    width: 28%;
                    height: 100%;
                    min-width: 210px;
                    margin-top: 0.5%;

                    span {
                        font-weight: normal;
                        margin-right: 3%;
                    }

                    .el-input,
                    .el-input--suffix {
                        width: 70%;
                        height: 90%;

                        /deep/ .el-input__inner {
                            height: 100%;
                        }
                    }
                }

                .byType {
                    width: 26%;
                    min-width: 210px;
                    height: 100%;
                    margin-top: 0.5%;

                    span {
                        font-weight: normal;
                        margin-right: 3%;
                    }

                    /deep/ .el-select {
                        width: 70%;
                        height: 100%;

                        .el-input,
                        .el-input--suffix {
                            height: 90%;

                            .el-input__inner {
                                height: 100%;
                            }

                            .el-select__caret,
                            .el-input__icon,
                            .el-icon-arrow-up {
                                display: flex;
                                justify-content: center;
                                align-items: center;
                            }
                        }
                    }
                }

                .el-button,
                .el-button--default,
                .is-plain {
                    margin: 0;
                    width: 12%;
                    height: 90%;
                    padding: 1% 1%;
                }
            }

            .content-table-body {
                width: 100%;
                min-height: 230px;
                background-color: #fff;
                padding-top: 2%;

                /deep/ .cell {
                    color: #333;
                }

                /deep/ td {
                    padding-top: 0;
                    padding-bottom: 0;
                    font-size: 12px;

                    &:nth-child(5) {
                        .cell {
                            min-width: 200px;
                            margin-left: -20px;
                        }

                    }

                    &:nth-child(1),
                    &:nth-child(6) {
                        .cell {
                            margin-left: 10px;
                        }
                    }
                }

                /deep/ th {
                    font-size: 12px;
                    padding-top: 1%;
                    padding-bottom: 1%;
                    background-color: rgb(242, 242, 242);

                    &:nth-child(1),
                    &:nth-child(6) {
                        padding-left: 2%;
                    }
                }



                .paginationBox {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }
        }

        .content-camera {
            width: 50%;
            height: 100%;

            .content-camera-box {
                width: 92%;
                height: 92%;
                padding: 4%;
                background-color: #d9ecff;

                .content-camera-box-cameraBox {
                    width: 100%;
                    height: 60%;
                    background-color: rgb(85, 85, 85);
                    position: relative;
                }

                .content-camera-box-text {
                    width: calc(100% - 4px);
                    height: calc(36% - 4px);
                    margin-top: 4%;
                    border: 2px solid #ccc;
                    border-radius: 2px;
                    background-color: #fff;
                    position: relative;

                    p {
                        font-size: 16px;
                        font-weight: bold;
                        margin: 2%;
                    }

                    textarea {
                        width: 50%;
                        height: 50%;
                        margin-left: 2%;
                        border: 0;
                        outline: 0;
                        resize: none;
                    }

                    .img_bg_camera {
                        width: 40%;
                        height: 70%;
                        position: absolute;
                        right: 2%;
                        top: 2%;

                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }

                    .btnBox {
                        position: absolute;
                        bottom: 2%;
                        right: 2%;
                    }
                }
            }
        }
    }
}

.el-scrollbar__bar {
    //隐藏scroll，不然布局出错
    display: none;
}
</style>